import React, { useState, useEffect, useRef } from 'react';
import ReactDOM from 'react-dom';
import { Tabs, Tooltip, Card, Form, Button, Space, Toast } from '@douyinfe/semi-ui'; // Replace with actual UI library
import '@douyinfe/semi-ui/dist/css/semi.css';
import { AgentApi } from '@/api/index'; // Replace with actual API library
import ChartDom from './ChartDom'; // Replace with actual path to ChartDom component

const { TabPane } = Tabs;

const TabsDom = () => {
    const [agentList, setAgentList] = useState([]);
    const [feedBackList, setFeedBackList] = useState([]);
    const [feedBackSystemList, setFeedBackSystemList] = useState([]);
    const formRef = useRef(null);

    useEffect(() => {
        Promise.all([
            AgentApi.getAgentList({}),
            AgentApi.getFeedbackQuestionList({}),
            AgentApi.getFeedbackSystemList({})
        ]).then(([agentRes, feedbackRes, systemRes]) => {
            if (agentRes.code === 0) setAgentList(agentRes.data.list || []);
            if (feedbackRes.code === 0) setFeedBackList(feedbackRes.data.data || []);
            if (systemRes.code === 0) setFeedBackSystemList(systemRes.data || []);
        }).catch(error => {
            Toast.error('获取初始化数据失败');
            console.error('Error fetching initial data:', error);
        });
    }, []);

    const handleSubmit = values => {
        AgentApi.postFeedback(values).then((res) => {
            if (res.data.code === 0) {
                Toast.info('提交成功');
                if (formRef.current && formRef.current.formApi.reset) {
                    formRef.current.formApi.reset();
                }
            } else {
                Toast.error('提交失败');
            }
        })
    };

    return (
        <Tabs className="tabsDom" defaultActiveKey="1" tabPosition="left" type="button">
            <TabPane
                tab={
                    <Tooltip position="left" content="聊天" trigger="hover">
                        <svg className="icon" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
                            <path fill="#686A82" d="M6.5 13.5h7v-1h-7zm0-3h11v-1h-11zm0-3h11v-1h-11zM3 20.077V4.616q0-.691.463-1.153T4.615 3h14.77q.69 0 1.152.463T21 4.616v10.769q0 .69-.463 1.153T19.385 17H6.077zM5.65 16h13.735q.23 0 .423-.192t.192-.423V4.615q0-.23-.192-.423T19.385 4H4.615q-.23 0-.423.192T4 4.615v13.03zM4 16V4z" />
                        </svg>
                    </Tooltip>
                }
                key="1"
                itemKey="1"
            >
                <ChartDom agentList={agentList} />
            </TabPane>
            <TabPane
                tab={
                    <Tooltip position="left" content="AI" trigger="hover">
                        <svg className="icon" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
                            <g fill="none" stroke="#686A82" strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.5">
                                <path d="M20.5 16.929V10c0-3.771 0-5.657-1.172-6.828S16.271 2 12.5 2h-1C7.729 2 5.843 2 4.672 3.172S3.5 6.229 3.5 10v9.5" />
                                <path d="M20.5 17H6a2.5 2.5 0 0 0 0 5h14.5" />
                                <path d="M20.5 22a2.5 2.5 0 0 1 0-5m-8.192-5l-1.461-4.521A.72.72 0 0 0 10.154 7a.72.72 0 0 0-.693.479L8 12m7-5v5m-6.462-1.5h3.231" />
                            </g>
                        </svg>
                    </Tooltip>
                }
                key="2"
                itemKey="2"
            >
                <div className="agentDom">
                    <h2>Agent</h2>
                    {agentList.map(item => (
                        <Card key={item.id} title={item.name} style={{ marginTop: '15px' }}>
                            {item.description}
                        </Card>
                    ))}
                </div>
            </TabPane>
            <TabPane
                tab={
                    <Tooltip position="left" content="反馈" trigger="hover">
                        <svg className="icon" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
                            <path fill="none" stroke="#686A82" strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.5" d="m2.357 7.714l6.98 4.654c.963.641 1.444.962 1.964 1.087c.46.11.939.11 1.398 0c.52-.125 1.001-.446 1.964-1.087l6.98-4.654M7.157 19.5h9.686c1.68 0 2.52 0 3.162-.327a3 3 0 0 0 1.31-1.311c.328-.642.328-1.482.328-3.162V9.3c0-1.68 0-2.52-.327-3.162a3 3 0 0 0-1.311-1.311c-.642-.327-1.482-.327-3.162-.327H7.157c-1.68 0-2.52 0-3.162.327a3 3 0 0 0-1.31 1.311c-.328.642-.328 1.482-.328 3.162v5.4c0 1.68 0 2.52.327 3.162a3 3 0 0 0 1.311 1.311c.642.327 1.482.327 3.162.327" />
                        </svg>
                    </Tooltip>
                }
                key="3"
                itemKey="3"
            >
                <div className="feedbackDom">
                    <Form ref={formRef} onSubmit={values => handleSubmit(values)}>
                        <Form.Section text="基本信息">
                            <Form.Select
                                rules={[{ required: true, message: '请选择问题类型' }]}
                                field="feedback_question_id"
                                label="问题类型"
                                placeholder="请选择问题类型"
                                style={{ width: '100%' }}
                            >
                                {feedBackList.map(item => (
                                    <Form.Select.Option key={item.id} value={item.id}>
                                        {item.name}
                                    </Form.Select.Option>
                                ))}
                            </Form.Select>
                            <Form.Select
                                rules={[{ required: true, message: '请选择系统类型' }]}
                                field="system"
                                label="系统类型"
                                placeholder="请选择系统类型"
                                style={{ width: '100%' }}
                            >
                                {feedBackSystemList.map(item => (
                                    <Form.Select.Option key={item.id} value={item.id}>
                                        {item.name}
                                    </Form.Select.Option>
                                ))}
                            </Form.Select>
                            <Form.Input
                                rules={[{ required: true, message: '请输入你遇到了什么问题？' }]}
                                field="description"
                                label="问题概要"
                                placeholder="你遇到了什么问题？"
                                style={{ width: '100%' }}
                            />
                            <Form.TextArea
                                rules={[{ required: true, message: '请输入详细信息' }]}
                                field="content"
                                label="详细信息"
                                placeholder="请详细描述出了什么问题、您采取了什么操作以及您收到了什么报错信息。"
                                style={{ width: '100%' }}
                                autosize={{
                                    minRows: 3,
                                    maxRows: 6,
                                }}
                            />
                        </Form.Section>
                        <Space>
                            <Button type="primary" htmlType="submit" className="btn-margin-right">
                                提交(submit)
                            </Button>
                            <Button htmlType="reset">重置(reset)</Button>
                        </Space>
                    </Form>
                </div>
            </TabPane>
        </Tabs >
    );
};

export default TabsDom;